<template>
    <header>
        <van-swipe :autoplay="1000" class="my-swipe" indicator-color="red" lazy-render @change="onChange">
            <van-swipe-item v-for="image in images" :key="image" class="van-swipe-item">
                <img :src="image" alt="" class="center-image"/>
            </van-swipe-item>
        </van-swipe>
    </header>
    <body>
    <div class="gallery">
        <div v-for="(product, index) in store.products" :key="index" class="box">
            <img v-lazy="product.imageUrl"/>
            <div style="display: flex;justify-content: space-between;width: 150px">
                <p style="font-size: 10px;">{{ product.name }}</p>
                <p style="font-size: 10px;">{{ product.description }}</p>
                <p style="font-size: 10px;">Price: {{ product.price }}</p>
            </div>
        </div>
    </div>
    </body>
    <footer class="bottom">
        <Bottom/>
    </footer>
</template>
<script setup>
import {useProductStore} from "@/stores/productStore.ts";
import Bottom from "@/components/Bottom/Bottom.vue";

const images = [
    'https://xps01.xiaopeng.com/cms/material/pic/2024/07-28/pic_20240728194639_29977.jpg',
    'https://xps01.xiaopeng.com/cms/material/pic/2024/04-11/pic_20240411093020_64152.jpg',
    'https://xps01.xiaopeng.com/cms/material/pic/2023/12-29/pic_20231229181319_97707.jpg',
    'https://xps01.xiaopeng.com/cms/material/pic/2024/06-13/pic_20240613154045_58248.jpg',
    'https://img0.baidu.com/it/u=346058693,3171984659&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500',
    'https://xps01.xiaopeng.com/cms/material/pic/2023/09-25/pic_20230925172656_24673.jpg',
]
const store = useProductStore()
</script>
<style lang="scss" scoped>
.bottom {
  position: fixed;
  bottom: 0;
}

.image-gallery {
  padding-top: 50px;
  display: flex;
  flex-wrap: nowrap; /* 确保所有图片都在同一行显示 */
  overflow-x: auto; /* 显示水平滚动条 */
  gap: 10px; /* 间隔 */
  scroll-snap-type: x mandatory; /* 设置滚动快照 */
  img {
    width: 150px;
    height: 150px;
  }
}

.gallery {
  padding-top: 10px;
  display: flex;
  flex-wrap: nowrap; /* 确保所有图片都在同一行显示 */
  overflow-x: auto; /* 显示水平滚动条 */
  gap: 10px; /* 间隔 */
  scroll-snap-type: x mandatory; /* 设置滚动快照 */
  img {
    width: 150px;
    height: 150px;
  }
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.center-image {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

.van-popup.van-popup--center.van-toast.van-toast--middle.van-toast--text {
  width: 10px;
}
</style>